<%@page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>

	<script language="javascript">
		$(function() {
			
			//Configuración del autocomplete de responsable
			var ac_config = {
				minLength:1,
				source: "../datosjson/responsableAutocomplete",
				
				select: function(event, ui){
					$("#responsableHidden").val(ui.item.idUsuario);
					$(this).val(ui.item.nombreCompleto);
					return false;
				}
			};
			
			$("#responsable").autocomplete(ac_config).data( "autocomplete" )._renderItem = function( ul, item ) {
				return $( "<li></li>" )
				.data( "item.autocomplete", item )
				.append( "<a>" + item.nombreCompleto + "</a>" )
				.appendTo(ul);
		};
			
			
			
			$("#proyecto_form").validate({
				submitHandler: function(){
		    		$('#dialog_form').dialog("close");
	    			$('#proyectos_list').html(tablaVacia());
			    	$.post('../proyectos/guardarProyecto', $('#proyecto_form').serialize())
			    		.complete(function(){
					      	cargarTablita();
				    	});
			    	$('#dialog_form').remove();
					return false;
				}
				});
			$( "#datepicker1" ).datepicker( $.datepicker.regional[ "es" ] );
			$( "#datepicker2" ).datepicker( $.datepicker.regional[ "es" ] );
		});
	  	
	    function saveButton() { $('#proyecto_form').submit();};
	</script>
	
	<s:actionerror />
	<s:actionmessage />
	
	<s:form id="proyecto_form">
		<s:hidden name="proyecto.idProyecto" />
		<table>
			
		 	<tr>
				<td>Nombre</td>
				<td><s:textfield name="proyecto.nombre" theme="simple" cssClass="required" size="30" /></td>
			</tr>
		 	<tr>
				<td>Usuario Responsable</td>
				<td>
					<s:textfield name="proyecto.responsable.nombreCompleto" theme="simple" cssClass="required" id="responsable"/>
					<s:hidden id="responsableHidden" name="proyecto.responsable.idUsuario" />
					<div id="loading"></div>
				</td>
				</tr>
			<tr>
				<td>Fecha de Inicio</td>
				<td><s:textfield name="proyecto.fechaDeInicio" theme="simple" cssClass="required" id="datepicker1"/></td>
			</tr>
			<tr>
				<td>Fecha de Fin</td>
				<td><s:textfield name="proyecto.fechaDeFin" theme="simple" cssClass="required" id="datepicker2"/></td>
			</tr>
			<s:if test="proyecto.idProyecto != null">
				<tr>
					<td>Estado</td>
					<td><s:select list="estadosProyecto" theme="simple" listKey="idEstadoProyecto" 
					listValue="nombre" name="proyecto.estadoProyecto.idEstadoProyecto"></s:select></td>
				</tr>
			</s:if>
			<tr>
				<td>Horas Asignadas</td>
				<td> <s:textfield name="proyecto.horasAsignadas" theme="simple" size="5"/></td>
			</tr>
			<tr>
				<td>Descripción</td>
				<td><s:textarea name="proyecto.descripcion" theme="simple" cols="25" rows="4"/></td>
			</tr>
		</table>
	</s:form>
	
